<template>
  <div>
    <div class="news-title">{{ name }}</div>
    <div class="news-time">发布时间：{{ createdAt }}</div>
    <div v-show="psrc" style="width: 100%;height: 300px;text-align: center;line-height: 300px;vertical-align: middle;">
      <img :src="psrc" slt="新闻详情" width="600px" height="300px" align="top" @error="errorImg" />
    </div>
    <div class="news-content" v-html="content">
    </div>
  </div>
</template>

<script>
  import {
    newsDetail
  } from '../../../api/web/news.js'
  export default {
    data() {
      return {
        content: '',
        total: 0,
        createdAt: '',
        name: '',
        psrc: '',
        baseUrl: process.env.VUE_APP_BASE_API,
      }
    },
    created() {
      this.queryList()
    },
    methods: {
      errorImg(img) {
        img.src = ''
        this.psrc = null
        img.onerror = null
      },
      queryList() {
        newsDetail({
          id: this.$route.params.id
        }).then(res => {
          this.name = res.name
          this.content = res.content
          this.createdAt = res.createdAt
          this.psrc = this.baseUrl + res.imageUrl

        })
      }
    }
  }
</script>

<style lang="scss">
  .news-title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
  }

  .news-time {
    text-align: center;
    font-size: 12px;
    color: gray;
    margin: 15px 0 20px;
  }

  .news-content {
    padding: 0 10px;
    min-height: 300px;

    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      padding-inline-start: 40px;
    }
  }
</style>
